// stylelint-disable declaration-no-important

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} {
          #{$prop}: $length !important;
        }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} {
          margin: -$length !important;
        }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto {
      margin: auto !important;
    }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

/**
     * @Description: spacing extension
      * @author Xu Xiao dong
     * @date 2019/3/3
    */

@mixin ml($num) {
  margin-left: $num;
}
@mixin mr($num) {
  margin-right: $num;
}
@mixin mt($num) {
  margin-top: $num;
}
@mixin mb($num) {
  margin-bottom: $num;
}
@mixin padding($tb, $lr) {
  @if $lr {
    padding: $tb $lr;
  } @else {
    padding: $tb;
  }
}
%ml-5 {
  @include ml(5px);
}
%ml-16 {
  @include ml(16px);
}
%mr-16 {
  @include mr(16px);
}
%mtb-16 {
  @include mt(16px);
  @include mb(16px);
}
%mt-16 {
  @include mt(16px);
}
%pd-16 {
  @include padding(16px, false);
}
%pd-24 {
  @include padding(24px, false);
}
%pd-lr-10 {
  @include padding(0, 10px);
}
%pd-lr-1rem {
  @include padding(0.75rem, 1rem);
}
%pd-3-5 {
  @include padding(3px, 5px);
}
%pd-5-10 {
  @include padding(5px, 10px);
}
%pd-5 {
  @include padding(5px, false);
}
%pd-10 {
  @include padding(10px, 10px);
}
%no-padding {
  @include padding(0, false);
}
.margin-top-16px {
  @extend %mt-16;
}
.ml-5px {
  @extend %ml-5;
}
.ml-16px {
  @extend %ml-16;
}
.mr-16px {
  @extend %mr-16;
}
.mt-16px {
  @extend %mt-16;
}
.mtb-16px {
  @extend %mtb-16;
}
.pd-3-5px {
  @extend %pd-3-5;
}
.pd-5px {
  @extend %pd-3-5;
}

.pd-lr10px {
  @extend %pd-lr-10;
}
.pd-lr-1rem {
  @extend %pd-lr-1rem;
}
.pd-5-10px {
  @extend %pd-5-10;
}
.pd-10px {
  @extend %pd-10;
}
.pd-16px {
  @extend %pd-16;
}
.pd-24px {
  @extend %pd-24;
}
.no-padding {
  @extend %no-padding;
}
.sm-mt-16px {
  @include media-breakpoint-down('sm', $grid-breakpoints) {
    @include mt(16px);
  }
}
